<template>
  <div>
    <div class="cashItemContainer" @click="bindInfo" v-if="!alipay">
        <x-icon type="ios-plus" size="30"></x-icon>
        <slot></slot>
    </div>
    <div v-else class="cashItemContainer" @click="showInfo">
      <div class="accoutBox">
        <x-img src="../../../../../static/assets/zhifubao.png"></x-img>
        <div class="accout">
          <div style="font-size:0.29rem">
            <h3 style="font-size:.46rem;color:#000">支付宝</h3>
            {{(alipay.alipayNum||'') | hideNum}}
            <button class="change" @click="changeAlipay">更换</button>
          </div>
        </div>
      </div>
      <div class="showAlipayInfo" v-if="showAlipayInfo">
        <Info :content='name||""'></Info>
        <Info :content='idcard||""'></Info>
        <Info :content='alipay.alipayNum||""'></Info>
        <Info :content='alipay.nickName||""'></Info>
      </div>
    </div>
  </div>
</template>
<script>
import { XImg } from 'vux'
import Info from '../../../component/common/BankInfo'

export default {
  components:{
    XImg,
    Info
  },
  data(){
    return {
      showAlipayInfo:false
    }
  },
  props:["alipay","name","idcard"],
  methods:{
    showInfo(){
      this.showAlipayInfo = !this.showAlipayInfo
    },
    bindInfo(){
      this.$router.push('/cashManager/bindAlipay')
    },
    changeAlipay(){
      this.$router.push('/cashManager/changeAlipay')
    }
  },
  filters:{
    hideNum:function(val){
      // return val.replace(/(\d{4})\s(\d{4})\s(\d{4})\s(\d{4})/,'$1 **** *** $3')
      return val.replace(/([^\n]{3})[^\n]*([^\n]{3})/,'$1****$2')
    }
  }
}
</script>
<style lang="less">
  @import '../../../../style/mixin.less';

  .cashItemContainer{
    .wh(100%,2.6933rem);
    .fx(row,flex-start);
    .bs();
    padding-left: 0.6933rem;
    box-shadow:2px 2px 10px #aaa;
    margin-bottom: 0.2667rem;
    .sc(0.44rem,#c7c7c7);
    .vux-x-icon {
      .wh(.8rem,.8rem);
      fill: #ededed;
      margin-right: 0.4533rem;
    }
    .accoutBox{
      .wh(100%,2rem);
      .fx(row,flex-start,center);
      img{
        .wh(0.8533rem,0.8533rem);
        margin-right: 0.2933rem;
      }
      .accout{
        display: inline-block;
        margin-right: 1rem;
        width:6rem;
      }
    }
    .showAlipayInfo{
      .wh(7.84rem,4.1rem);
      .fx(column,space-bewteen);
      .bg(#ffffff);
      box-shadow:2px 2px 10px #aaa;
      position: absolute;
      z-index: 2;
      top: 1.7rem;
      left: 1.4rem;
    }
    .change{
      .wh(1.76rem,0.8267rem);
      .borderRadius(2rem);
      border: 1px solid #939393;
      .bg(#fff);
      .allcover();
      top:1rem;
      right: .7rem;;
    }
  }
</style>
